{% extends "base.html" %}

{% block title %}视频任务管理 - 告警系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="fw-bold text-primary">视频任务管理</h1>
    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addTaskModal">
        <i class="bi bi-plus-circle"></i> 添加任务
    </button>
</div>

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    <div class="col">
        <div class="card alert-card h-100">
            <div class="card-header bg-primary text-white fw-bold">任务 #T001</div>
            <div class="card-body">
                <h5 class="card-title">入口区域检测</h5>
                <p class="card-text">
                    <span class="fw-medium">通道:</span> 主入口通道<br>
                    <span class="fw-medium">类型:</span> 人员检测<br>
                    <span class="fw-medium">状态:</span> <span class="badge bg-success">运行中</span>
                </p>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <button class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-pause"></i> 暂停
                </button>
                <button class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-trash"></i> 删除
                </button>
            </div>
        </div>
    </div>
    
    <div class="col">
        <div class="card alert-card h-100">
            <div class="card-header bg-primary text-white fw-bold">任务 #T002</div>
            <div class="card-body">
                <h5 class="card-title">停车场监控</h5>
                <p class="card-text">
                    <span class="fw-medium">通道:</span> 停车场通道<br>
                    <span class="fw-medium">类型:</span> 车辆检测<br>
                    <span class="fw-medium">状态:</span> <span class="badge bg-success">运行中</span>
                </p>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <button class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-pause"></i> 暂停
                </button>
                <button class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-trash"></i> 删除
                </button>
            </div>
        </div>
    </div>
    
    <div class="col">
        <div class="card alert-card h-100">
            <div class="card-header bg-primary text-white fw-bold">任务 #T003</div>
            <div class="card-body">
                <h5 class="card-title">仓库安全检测</h5>
                <p class="card-text">
                    <span class="fw-medium">通道:</span> 仓库通道<br>
                    <span class="fw-medium">类型:</span> 烟火检测<br>
                    <span class="fw-medium">状态:</span> <span class="badge bg-danger">已停止</span>
                </p>
            </div>
            <div class="card-footer d-flex justify-content-between">
                <button class="btn btn-sm btn-outline-success">
                    <i class="bi bi-play"></i> 启动
                </button>
                <button class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-trash"></i> 删除
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 添加任务模态框 -->
<div class="modal fade" id="addTaskModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">添加视频任务</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="taskName" class="form-label">任务名称</label>
                        <input type="text" class="form-control" id="taskName" placeholder="请输入任务名称">
                    </div>
                    <div class="mb-3">
                        <label for="taskChannel" class="form-label">选择通道</label>
                        <select class="form-select" id="taskChannel">
                            <option selected>主入口通道</option>
                            <option>停车场通道</option>
                            <option>仓库通道</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="taskType" class="form-label">任务类型</label>
                        <select class="form-select" id="taskType">
                            <option selected>人员检测</option>
                            <option>车辆检测</option>
                            <option>烟火检测</option>
                            <option>入侵检测</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="taskSensitivity" class="form-label">检测灵敏度</label>
                        <input type="range" class="form-range" id="taskSensitivity" min="1" max="10" value="7">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">创建任务</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}